<template>
    <div class="qilin-QilinTable">
        <QilinExplain title="表格组件" date="2023-09-21">
            <template v-slot:content>
                <QilinTable v-model:tableConfig="tableConfig" ref="tableConfigRef"></QilinTable>
                <CodeMirror :codeValue="getCodeValue"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>

<script setup>
/*
    数据变量定义区域
*/
// 获取表格组件元素DOM
const tableConfigRef=ref(null);


/*
    计算属性等代码区域
*/
// 表格组件逻辑代码
const getCodeValue=computed(()=>{
    return `
        // 占位元素
        <QilinTable v-model:tableConfig="tableConfig" ref="tableConfigRef"></QilinTable>

        // 点击编辑按钮事件监听
        const updateData=(row,item,scope,optItem)=>{
            console.log(row,item,scope,optItem);
        };
        // 点击删除按钮事件监听
        const deleteData=(row,item,scope,optItem)=>{
            console.log(row,item,scope,optItem);
        };

        // 表单配置项
        const tableConfig=reactive({
            elTableConfig:{
                border:true
            },
            headerConfig:[
                {
                    label:"序号",
                    type:"sortIndex",
                    width:60,
                    align:"center"
                },
                {
                    label:"工号",
                    prop:"employeeCode",
                    type:"text",
                    align:"center",
                    width:80
                },
                {
                    label:"年份",
                    prop:"year",
                    type:"text",
                    align:"center",
                    width:80
                },
                {
                    label:"月份",
                    prop:"month",
                    type:"text",
                    align:"center",
                    width:80
                },
                {
                    label:"部门",
                    prop:"deptName",
                    type:"text",
                    align:"center",
                    ellipsis:true,
                    width:100
                },
                {
                    label:"姓名",
                    prop:"userName",
                    type:"text",
                    align:"center",
                    width:100
                },
                {
                    label:"社保所属地",
                    prop:"socialSecurityAddress",
                    type:"text",
                    align:"center",
                    ellipsis:true,
                    width:120
                },
                {
                    label:"身份证号码",
                    prop:"idCard",
                    type:"text",
                    align:"center",
                    width:180
                },
                {
                    label:"人数",
                    prop:"personCount",
                    type:"text",
                    align:"center",
                    width:80
                },
                {
                    label:"联系方式",
                    prop:"phone",
                    type:"text",
                    align:"center",
                    width:120
                },
                {
                    label:"入职时间",
                    prop:"inOfficeDate",
                    type:"text",
                    align:"center",
                    width:120
                },
                {
                    label:"医保基数",
                    prop:"medicalInsurance",
                    type:"text",
                    align:"center",
                    width:100
                },
                {
                    label:"社保基数",
                    prop:"socialSecurityBase",
                    type:"text",
                    align:"center",
                    width:100
                },
                {
                    label:"个人部分",
                    type:"multiple",
                    align:"center",
                    children:[
                        {
                            label:"个人基养",
                            prop:"personBaseCultivate",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"个人失业",
                            prop:"personUnemployment",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"个人医疗",
                            prop:"personMedical",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"大病救助",
                            prop:"diseaseSalvation",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"公积金基数",
                            prop:"accumulationFundBase",
                            type:"text",
                            align:"center",
                            width:100
                        },
                        {
                            label:"公积金个人扣款",
                            prop:"accumulationFundCut",
                            type:"text",
                            align:"center",
                            width:130
                        }
                    ]
                },
                {
                    label:"个税扣款",
                    prop:"taxCut",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"扣款小计",
                    prop:"cutSubtotal",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"差旅费报销",
                    prop:"travelBusinessCut",
                    type:"text",
                    align:"center",
                    width:100
                },
                {
                    label:"培训费报销",
                    prop:"trainCut",
                    type:"text",
                    align:"center",
                    width:100
                },
                {
                    label:"团建报销",
                    prop:"groupCut",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"慰问",
                    prop:"condole",
                    type:"text",
                    align:"center",
                    width:80
                },
                {
                    label:"体检",
                    prop:"physicalExamination",
                    type:"text",
                    align:"center",
                    width:80
                },
                {
                    label:"单位部分",
                    type:"multiple",
                    align:"center",
                    children:[
                        {
                            label:"单位养老",
                            prop:"unitCultivateOld",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"单位失业",
                            prop:"unitUnemployment",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"单位医疗",
                            prop:"unitMedical",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"单位工伤",
                            prop:"unitInjury",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"单位生育",
                            prop:"unitBirth",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"单位大病",
                            prop:"unitDisease",
                            type:"text",
                            align:"center",
                            width:90
                        },
                        {
                            label:"公积金企业部分",
                            prop:"unitFund",
                            type:"text",
                            align:"center",
                            width:130
                        }
                    ]
                },
                {
                    label:"单位五险一金费用",
                    prop:"unitFiveInsurance",
                    type:"text",
                    align:"center",
                    width:150
                },
                {
                    label:"社保代缴管理费",
                    prop:"socialManageCut",
                    type:"text",
                    align:"center",
                    width:130
                },
                {
                    label:"单位五险一金费用小计",
                    prop:"socialManageSubCut",
                    type:"text",
                    align:"center",
                    width:180
                },
                {
                    label:"差额",
                    prop:"priceDifference",
                    type:"text",
                    align:"center",
                    width:80
                },
                {
                    label:"人工成本合计",
                    prop:"personArtificial",
                    type:"text",
                    align:"center",
                    width:120
                },
                {
                    label:"税率",
                    prop:"taxRate",
                    type:"text",
                    align:"center",
                    width:80
                },
                {
                    label:"管理费",
                    prop:"manageCut",
                    type:"text",
                    align:"center",
                    width:80
                },
                {
                    label:"单位承担费用合计",
                    prop:"unitCost",
                    type:"text",
                    align:"center",
                    width:150
                },
                {
                    label:"备注",
                    prop:"remark",
                    type:"text",
                    align:"center",
                    ellipsis:true
                },
                {
                    label:"操作",
                    type:"operate",
                    align:"center",
                    fixed:"right",
                    width:180,
                    operateOptions:[
                        {
                            buttonName:"编辑",
                            buttonType:"primary",
                            buttonSize:"default",
                            text:true,
                            buttonEvent:updateData
                        },
                        {
                            buttonName:"删除",
                            buttonType:"primary",
                            buttonSize:"default",
                            text:true,
                            buttonEvent:deleteData
                        }
                    ]
                }
            ],
            tableData:[{}],
            paginationsObj:{
                currentPage:1, //当前页
                pageSize:10, //当前每页数量
                pageSizes:[10,20,30], //每页显示多少条选项集
                total:0, //表格总数量
                layout:"total,sizes,prev,pager,next,jumper"
            }
        });
        // 配置项代码注释
        tableConfig:{
            type:Object,
            default(){
                return {
                    // el-table标签上的配置项
                    elTableConfig:{
                        border:true, //是否带边框--默认true
                        stripe:false, //是否为斑马纹--默认false
                        size:"default", //表格大小--默认default
                        rowKey:"id",
                        highlightCurrentRow:false, //是否高亮当前行
                    },
                    // 表头相关配置项
                    headerConfig:[
                        {
                            label:"姓名", //表头名称
                            type:"text", //表头的类型--默认为text
                            fixed:"right", //是否固定--当且仅当type为operate时生效--默认right
                            slotName:"", //slot元素的name，当且仅当type为slot时有效
                            format:"", //时间格式化配置
                            prop:"name", //对应后台数据名称
                            align:"left", //对齐方式--默认center
                            width:60, //列宽-自适应宽度
                            ellipsis:false, //是否超出悬浮展示--默认false
                            replaceValue:"-", //若值为空，则默认显示为-
                            isHide:false, //是否隐藏某个表头，默认false
                            isShowExpandTooltip:false, //是否开启展开行功能
                            expandTooltipFn:"event", //展开行内容方法，内容由方法返回
                            hideSeparate:false, //操作按钮之间是否具有分隔符-默认false，没有
                            operateOptions:[ //操作栏按钮配置项--当且仅当type为operate生效
                                {
                                    buttonName:"按钮", //按钮名称
                                    buttonType:"default", //按钮类型--默认default
                                    buttonSize:"small", //按钮大小--默认mini
                                    buttonEvent:"event", //按钮点击事件
                                    isHide:false, //是否隐藏该按钮
                                    disable:false, //是否禁用
                                    isDiabled:"event", //判断当前按钮是否禁用的方法
                                    isHideFn:"event", //判断当前按钮是否隐藏的方法
                                }
                            ],
                            moreOperateOptions:[ //操作栏更多按钮配置项--当且仅当type为operate生效
                                {
                                    buttonName:"按钮", //按钮名称
                                    buttonType:"default", //按钮类型--默认default
                                    buttonSize:"small", //按钮大小--默认mini
                                    buttonEvent:"event", //按钮点击事件
                                    isHide:false, //是否隐藏该按钮
                                    disable:false, //是否禁用
                                    isDiabled:"event", //判断当前按钮是否禁用的方法
                                    isHideFn:"event", //判断当前按钮是否隐藏的方法
                                }
                            ]
                        }
                    ],
                    // 真实数据
                    tableData:[],
                    // 插槽名容器
                    slotData:{},
                    // 表格分页配置项
                    paginationsObj:{
                        isHide:false, //是否隐藏分页器
                        currentPage:1, //当前页
                        pageSize:10, //当前每页数量
                        pageSizes:[10,20,30], //每页显示多少条选项集
                        total:0, //表格总数量
                        layout:"total,sizes,prev,pager,next,jumper"
                    }
                };
            }
        }
    `
});


/*
    逻辑脚本代码区域
*/
// 点击编辑按钮事件监听
const updateData=(row,item,scope,optItem)=>{
    console.log(row,item,scope,optItem);
};
// 点击删除按钮事件监听
const deleteData=(row,item,scope,optItem)=>{
    console.log(row,item,scope,optItem);
};

// 表格配置项
const tableConfig=reactive({
    elTableConfig:{
        border:true
    },
    headerConfig:[
        {
            label:"序号",
            type:"sortIndex",
            width:60,
            align:"center"
        },
        {
            label:"工号",
            prop:"employeeCode",
            type:"text",
            align:"center",
            width:80
        },
        {
            label:"年份",
            prop:"year",
            type:"text",
            align:"center",
            width:80
        },
        {
            label:"月份",
            prop:"month",
            type:"text",
            align:"center",
            width:80
        },
        {
            label:"部门",
            prop:"deptName",
            type:"text",
            align:"center",
            ellipsis:true,
            width:100
        },
        {
            label:"姓名",
            prop:"userName",
            type:"text",
            align:"center",
            width:100
        },
        {
            label:"社保所属地",
            prop:"socialSecurityAddress",
            type:"text",
            align:"center",
            ellipsis:true,
            width:120
        },
        {
            label:"身份证号码",
            prop:"idCard",
            type:"text",
            align:"center",
            width:180
        },
        {
            label:"人数",
            prop:"personCount",
            type:"text",
            align:"center",
            width:80
        },
        {
            label:"联系方式",
            prop:"phone",
            type:"text",
            align:"center",
            width:120
        },
        {
            label:"入职时间",
            prop:"inOfficeDate",
            type:"text",
            align:"center",
            width:120
        },
        {
            label:"医保基数",
            prop:"medicalInsurance",
            type:"text",
            align:"center",
            width:100
        },
        {
            label:"社保基数",
            prop:"socialSecurityBase",
            type:"text",
            align:"center",
            width:100
        },
        {
            label:"个人部分",
            type:"multiple",
            align:"center",
            children:[
                {
                    label:"个人基养",
                    prop:"personBaseCultivate",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"个人失业",
                    prop:"personUnemployment",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"个人医疗",
                    prop:"personMedical",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"大病救助",
                    prop:"diseaseSalvation",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"公积金基数",
                    prop:"accumulationFundBase",
                    type:"text",
                    align:"center",
                    width:100
                },
                {
                    label:"公积金个人扣款",
                    prop:"accumulationFundCut",
                    type:"text",
                    align:"center",
                    width:130
                }
            ]
        },
        {
            label:"个税扣款",
            prop:"taxCut",
            type:"text",
            align:"center",
            width:90
        },
        {
            label:"扣款小计",
            prop:"cutSubtotal",
            type:"text",
            align:"center",
            width:90
        },
        {
            label:"差旅费报销",
            prop:"travelBusinessCut",
            type:"text",
            align:"center",
            width:100
        },
        {
            label:"培训费报销",
            prop:"trainCut",
            type:"text",
            align:"center",
            width:100
        },
        {
            label:"团建报销",
            prop:"groupCut",
            type:"text",
            align:"center",
            width:90
        },
        {
            label:"慰问",
            prop:"condole",
            type:"text",
            align:"center",
            width:80
        },
        {
            label:"体检",
            prop:"physicalExamination",
            type:"text",
            align:"center",
            width:80
        },
        {
            label:"单位部分",
            type:"multiple",
            align:"center",
            children:[
                {
                    label:"单位养老",
                    prop:"unitCultivateOld",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"单位失业",
                    prop:"unitUnemployment",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"单位医疗",
                    prop:"unitMedical",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"单位工伤",
                    prop:"unitInjury",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"单位生育",
                    prop:"unitBirth",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"单位大病",
                    prop:"unitDisease",
                    type:"text",
                    align:"center",
                    width:90
                },
                {
                    label:"公积金企业部分",
                    prop:"unitFund",
                    type:"text",
                    align:"center",
                    width:130
                }
            ]
        },
        {
            label:"单位五险一金费用",
            prop:"unitFiveInsurance",
            type:"text",
            align:"center",
            width:150
        },
        {
            label:"社保代缴管理费",
            prop:"socialManageCut",
            type:"text",
            align:"center",
            width:130
        },
        {
            label:"单位五险一金费用小计",
            prop:"socialManageSubCut",
            type:"text",
            align:"center",
            width:180
        },
        {
            label:"差额",
            prop:"priceDifference",
            type:"text",
            align:"center",
            width:80
        },
        {
            label:"人工成本合计",
            prop:"personArtificial",
            type:"text",
            align:"center",
            width:120
        },
        {
            label:"税率",
            prop:"taxRate",
            type:"text",
            align:"center",
            width:80
        },
        {
            label:"管理费",
            prop:"manageCut",
            type:"text",
            align:"center",
            width:80
        },
        {
            label:"单位承担费用合计",
            prop:"unitCost",
            type:"text",
            align:"center",
            width:150
        },
        {
            label:"备注",
            prop:"remark",
            type:"text",
            align:"center",
            ellipsis:true
        },
        {
            label:"操作",
            type:"operate",
            align:"center",
            fixed:"right",
            width:180,
            operateOptions:[
                {
                    buttonName:"编辑",
                    buttonType:"primary",
                    buttonSize:"default",
                    text:true,
                    buttonEvent:updateData
                },
                {
                    buttonName:"删除",
                    buttonType:"primary",
                    buttonSize:"default",
                    text:true,
                    buttonEvent:deleteData
                }
            ]
        }
    ],
    tableData:[{}],
    paginationsObj:{
        currentPage:1, //当前页
        pageSize:10, //当前每页数量
        pageSizes:[10,20,30], //每页显示多少条选项集
        total:0, //表格总数量
        layout:"total,sizes,prev,pager,next,jumper"
    }
});


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-{

}
</style>
